<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery/jquery-3.2.1.js"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .big {
        width: 800px;
        height: 400px;
        margin: 200px auto;
        position: relative;
        border: 1px solid yellowgreen;
    }

    /* .middle {} */

    .middle li {
        width: 800px;
        height: 400px;
        position: absolute;
    }

    .middle li img {
        width: 100%;
        height: 100%;
        opacity: 0%;
    }

    .middle li img.hear {
        opacity: 100%;
    }

    .go {
        height: 100px;
        width: 50px;
        font-size: 50px;
        line-height: 100px;
        text-align: center;
        font-weight: 800;
        background-color: rgba(51, 51, 51, 0.348);
        color: aliceblue;
        position: absolute;
        top: 125px;
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
        /* top: 50px; */
    }

    .list {
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        bottom: 50px;
    }

    .list li {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 0 50px;
        background-color: aquamarine;
        text-align: center;
        line-height: 50px;
    }

    .list li.change {
        background-color: blueviolet;
    }
</style>

<body>
    <div class="big">
        <ul class="middle">
            <li><img src="./images/3.png" alt="" class="hear"></li>
            <li><img src="./images/2.png" alt=""></li>
            <li><img src="./images/6.png" alt=""></li>
            <li><img src="./images/9.png" alt=""></li>
        </ul>
        <div class="left go">&lt;</div>
        <div class="right go">&gt;</div>
        <ul class="list">
            <li class="change">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
<script>
    var timer;
    var index = 0;

    function go() {
        $(".middle li img").removeClass("hear").eq(index).addClass("hear");
        list_change();
    }

    function list_change() {
        $(".list li").removeClass("change").eq(index).addClass("change");
    }

    timer = setInterval(() => {
        index++
        index = index == 4 ? 0 : index;
        go()
    }, 1000);

    $("div.left").click(() => {
        index--
        index = index == -1 ? 3 : index;
        go();
    })

    $("div.right").click(() => {
        index++
        index = index == 4 ? 0 : index;
        go();
    })

    $(".big").mouseover(() => {
        clearInterval(timer)
    })

    $(".big").mouseout(() => {
        timer = setInterval(() => {
            index++
            index = index == 4 ? 0 : index;
            go()
        }, 1000);
    })

    $(".list").delegate("li", "click", (e) => {
        index = $(e.target).text() - 1;
        console.log(index)
        go()
    })
    // $.ajax({
    //     method: "get",
    //     url: "http://192.168.110.129:3000/search_info",
    //     data: {

    //     },
    //     success: function (data) {
    //         console.log(data)
    //     },
    //     error: function (err) {
    //         console.log(err)
    //     }
    // })
    // console.log($)
    // $.extend({
    //     fangfa1: function (a, b) {
    //         return a < b ? a : b;
    //     }
    // })
    // console.log($.fangfa1(2, 3));

    // $.fn.extend({
    //     fangfa1: function (a, b) {
    //         return a < b ? a : b;
    //     }
    // })
    // console.log($(".box").fangfa1(4, 3))
</script>

</html>